window.addEventListener('load', function() {

    // 封装一个函数,获取dom对象
    // $在js中可以作为变量名或者函数名的一部分
    // cssSelector形参是css选择器的意思

    function getdom(cssSelector) {
        var dom = document.querySelectorAll(cssSelector);

        if (dom.length === 0) {
            return null;
        }

        if (dom.length === 1) {
            return dom[0];
        }

        return dom;
    }

    // 获取事件
    var preview_img = getdom('.preview_img');
    var mask = getdom('.mask');
    var big = getdom('.big');
    var bigImg = getdom('.bigImg');
    var lis = getdom('.list_item li');
    var ulimg = getdom('.list_item');
    var arrow_prev = getdom('.arrow_prev');
    var arrow_next = getdom('.arrow_next');
    // 绑定鼠标经过事件
    preview_img.addEventListener('mouseenter', function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    })

    // 绑定鼠标离开事件
    preview_img.addEventListener('mouseleave', function() {
        mask.style.display = 'none';
        big.style.display = 'none';
    })

    // 绑定鼠标移动事件
    preview_img.addEventListener('mousemove', function(e) {
        // 计算鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;

        // 移动距离
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;


        // preview_img.offsetWidth - mask.offsetWidth 是最大移动距离
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;

        // 限制移动距离
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX > maskMax) {
            maskX = maskMax;
        }

        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY > maskMax) {
            maskY = maskMax;
        }

        // 让遮罩层随着鼠标移动
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        // 大图最大移动距离 = 大图宽度 - 大图盒子宽度
        var bigMax = bigImg.offsetWidth - big.offsetWidth;

        //大图移动距离 = 遮罩层移动距离 *  大图最大移动距离 / 遮罩层最大移动距离 
        var bigImgX = maskX * bigMax / maskMax;
        var bigImgY = maskY * bigMax / maskMax;

        // 大图移动距离赋值
        bigImg.style.left = -bigImgX + 'px';
        bigImg.style.top = -bigImgY + 'px';


    })

    // 遍历小li
    for (var i = 0; i < lis.length; i++) {
        // 绑定鼠标经过事件
        lis[i].addEventListener('mouseenter', function() {
            // 边框排他
            for (var j = 0; j < lis.length; j++) {
                lis[j].classList.remove('current');
            }
            this.classList.add('current');
            // 获取所有小图片
            var list_items = getdom('.list_item img');
            // 遍历所有小图片
            for (var k = 0; k < list_items.length; k++) {
                // 小图片绑定鼠标经过事件
                list_items[k].addEventListener('mouseenter', function() {
                    var middleimg = getdom('.middleimg');
                    // 利用replace()替换中大图片
                    middleimg.src = this.src.replace('small', 'middle');
                    bigImg.src = this.src.replace('small', 'big');
                })
            }

        })
    }

    // 给左右按钮绑定点击事件
    arrow_next.addEventListener('click', function() {
        ulimg.style.left = -420 + 'px';

    })

    arrow_prev.addEventListener('click', function() {
        ulimg.style.left = 0 + 'px';

    })
})